
<template>
  <div class="hello">
    <header>
      <p>
        <img src="../assets/img/fanhui.png">
        <span>弹幕皮肤</span>
      </p>
    </header>
    <div class="teb">
      <p>全部皮肤</p>
      <p>皮肤设置</p>
    </div>
    <main>
      <div class="content">
        <ul>
          <li>
            <span><img src="../assets/img/tmpf-1.png"></span>
            <span>MOMO酱</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tmpf-2.png"></span>
            <span>恐小龙</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tmpf-3.png"></span>
            <span>荔鸡</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tnpf-4.png"></span>
            <span>樱花熊</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tmpf-5.png"></span>
            <span>doge</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tmpf-1.png"></span>
            <span>四页草专用</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tmpf-2.png"></span>
            <span>番茄君</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tmpf-3.png"></span>
            <span>树懒</span>
            <span>20金币/月</span>
          </li>
          <li>
            <span><img src="../assets/img/tnpf-4.png"></span>
            <span>樱花熊</span>
            <span>20金币/月</span>
          </li>
        </ul>

      </div>

    </main>
    <footer></footer>

  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';

header{
   p{
    .px2rem(height, 100);
    .px2rem(line-height, 100);
    img{
       .padding-left(20);
       .px2rem(height, 24);
       .px2rem(height, 24);
    }
    span{
      .font(28,#474747);
      .padding-left(10);
    }
  }
}
.teb{
    .px2rem(height, 100);
    .webkit();
    align-items: center;
    justify-content: space-around;
    .padding-top(34);
    .border-bottom(1,solid,#edebe0);
    p{
      .font(32,#a8a79f);
      .px2rem(width, 270);
      text-align: center;
      .padding-bottom(50);
     &:hover{
         .border-bottom(6,solid, #fe3297);
         .font(32,#000);
      };
    }
}
main{
  .margin-left(20);
  .content{
    .margin-top(88);
    ul{
      li{
        .webkit();
        align-items: center;
        justify-content: space-between;
        .padding-bottom(55);
        span:nth-child(2){
          .margin-right(74);
        };
        span:nth-child(1){
          img{
            .px2rem(width, 182);
            .px2rem(height, 70);
          }
        };
        span:nth-child(2){
          .font(24,#686862);
        };
        span:nth-child(3){
          .margin-right(20);
          .px2rem(width, 130);
          .px2rem(height, 44);
          .font(16, #fff);
          background: #ff5353;
          text-align: center;
          .line-height(44);
          .border-radius(8);
        };
      
      }
    }
  }
}


</style>
